<div class="docs-title heading--1"><a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a></div>
<ul class="docs-nav">
  <li>
    <a class="docs-nav__link {% if page.url == '/index.html' %}active{% endif %}" href="{{ '/' | prepend: site.baseurl }}">Getting started</a>
  </li>
  <li>
    <a class="docs-nav__link {% if page.url contains '/theme/' %}active{% endif %}" href="{{ '/theme' | prepend: site.baseurl }}">What's included</a>
  </li>
  <li>
    <a class="docs-nav__link {% if page.url contains '/commands/' %}active{% endif %}" href="{{ '/commands' | prepend: site.baseurl }}">Commands</a>
    <ul class="docs-sub-nav">
      <li>
        <a href="{{ '/commands/#global-commands' | prepend: site.baseurl }}" class="docs-sub-nav__link">Global commands</a>
      </li>
      <li>
        <a href="{{ '/commands/#build-commands' | prepend: site.baseurl }}" class="docs-sub-nav__link">Build commands</a>
      </li>
      <li>
        <a href="{{ '/commands/#sync-commands' | prepend: site.baseurl }}" class="docs-sub-nav__link">Sync commands</a>
      </li>
    </ul>
  </li>
  <li>
    <a class="docs-nav__link {% if page.url contains '/theme-scaffold/' %}active{% endif %}" href="{{ '/theme-scaffold' | prepend: site.baseurl }}">Theme scaffold</a>
    <ul class="docs-sub-nav">
      <li>
        <a href="{{ '/theme-scaffold/#templates-and-configuration' | prepend: site.baseurl }}" class="docs-sub-nav__link">Templates and configuration</a>
      </li>
      <li>
        <a href="{{ '/theme-scaffold/#sections' | prepend: site.baseurl }}" class="docs-sub-nav__link">Sections</a>
      </li>
      <li>
        <a href="{{ '/theme-scaffold/#sass-helpers' | prepend: site.baseurl }}" class="docs-sub-nav__link">Sass helpers</a>
      </li>
      <li>
        <a href="{{ '/theme-scaffold/#javascript-helpers' | prepend: site.baseurl }}" class="docs-sub-nav__link">JavaScript helpers</a>
      </li>
      <li>
        <a href="{{ '/theme-scaffold/#translation-keys' | prepend: site.baseurl }}" class="docs-sub-nav__link">Translation keys</a>
      </li>
    </ul>
  </li>
  <li>
    <a class="docs-nav__link {% if page.url contains '/css-examples/' %}active{% endif %}" href="{{ '/css-examples' | prepend: site.baseurl }}">CSS examples</a>
    <ul class="docs-sub-nav">
      <li>
        <a href="{{ '/css-examples/#breakpoints' | prepend: site.baseurl }}" class="docs-sub-nav__link">Breakpoints and media queries</a>
      </li>
      <li>
        <a href="{{ '/css-examples/#grid' | prepend: site.baseurl }}" class="docs-sub-nav__link">Grid</a>
      </li>
      <li>
        <a href="{{ '/css-examples/#svg-icons' | prepend: site.baseurl }}" class="docs-sub-nav__link">SVG icons</a>
      </li>
      <li>
        <a href="{{ '/css-examples/#responsive-tables' | prepend: site.baseurl }}" class="docs-sub-nav__link">Responsive tables</a>
      </li>
      <li>
        <a href="{{ '/css-examples/#blank-states' | prepend: site.baseurl }}" class="docs-sub-nav__link">Blank states</a>
      </li>
      <li>
        <a href="{{ '/css-examples/#sass-mixins' | prepend: site.baseurl }}" class="docs-sub-nav__link">Sass mixins</a>
      </li>
    </ul>
  </li>
  <li>
    <a class="docs-nav__link {% if page.url contains '/js-examples/' %}active{% endif %}" href="{{ '/js-examples' | prepend: site.baseurl }}">JS examples</a>
    <ul class="docs-sub-nav">
      <li>
        <a href="{{ '/js-examples/#trap-focus' | prepend: site.baseurl }}" class="docs-sub-nav__link">Trap focus</a>
      </li>
      <li>
        <a href="{{ '/js-examples/#responsive-tables-and-videos' | prepend: site.baseurl }}" class="docs-sub-nav__link">Responsive tables and videos</a>
      </li>
      <li>
        <a href="{{ '/js-examples/#format-currency' | prepend: site.baseurl }}" class="docs-sub-nav__link">Format currency</a>
      </li>
      <li>
        <a href="{{ '/js-examples/#image-helpers' | prepend: site.baseurl }}" class="docs-sub-nav__link">Image helpers</a>
      </li>
      <li>
        <a href="{{ '/js-examples/#product-variants' | prepend: site.baseurl }}" class="docs-sub-nav__link">Product variants</a>
      </li>
      <li>
        <a href="{{ '/js-examples/#cart-helpers' | prepend: site.baseurl }}" class="docs-sub-nav__link">Cart helpers</a>
      </li>
      <li>
        <a href="{{ '/js-examples/#section-events' | prepend: site.baseurl }}" class="docs-sub-nav__link">Section events</a>
      </li>
    </ul>
  </li>
</ul>
<div class="docs-shopify-logo">
  <a href="https://www.shopify.com">
    <img src="{{ "/assets/images/shopify-logo-large.png" | prepend: site.baseurl }}" alt="Shopify" />
  </a>
  <p><a href="mailto:slate@shopify.com">Provide feedback</a></p>
</div>
